<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
            min-width: 786px;
        }
        .tip{
            position: fixed;
            right: 0px;
            top: 0px;
        }
        .tip tr>td:first-child{
            color: red;
        }
        .tip tr>td:nth-child(2){
            color: blue;
        }
        ul,li{
            padding: 0;
            list-style: none;
        }
        #imageContiner{
            margin-top: 30px;            
        }
        #imageContiner>img{
            width: 200px;
            height: 200px;
            border:solid 1px blue;
        }
        .my-button{
            background-color: rgb(51,151,228);
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            border: none;
        }
        .my-button:hover{
            background-color: rgb(11, 139, 236);
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            border: none;
        }
        
        .my-button:active{
            background-color:rgb(0, 119, 255);
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            border: none;
        }
        
        .my-button-red{
            background-color: rgb(80, 184, 12);
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            border: none;
        }
        .my-button-red:hover{
            background-color: rgb(12, 224, 76);
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            border: none;
        }
        
        .my-button-red:active{
            background-color:rgb(19, 233, 144);
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            border: none;
        }
        #marge_model_select{
            width: 150px;
            height: 30px;
        }
        .h_model{

        }
        .v_model{

        }
        .vh_model{
            
        }
        .margn-top-20{
            margin-top: 20px;
        }
        .me-input{
            display: flex;
            align-items: center;
        }
        #myInput{
        }
        .file-input{
            position: relative;
            width: 230px;
            height: 100px;
            border: 1px dashed #282828;
        }
        .file-input>input{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
    </style>
    <title>长青-合图小公举💗</title>
    <script>
        //获取合并后的图片名称
        var getMergeImageName = function(str){
            return str.substr(0,str.length-4);
        }
    </script>
</head>
<body>
    <div  class="file-input">
        <svg class="file-input-bg" t="1669960392940" class="icon" width="100%" height="80" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2707" width="200" height="200"><path d="M998.4 556.8c0-6.4 0-12.8-6.4-25.6L870.4 320c-12.8-19.2-32-25.6-51.2-12.8-19.2 12.8-25.6 32-12.8 51.2l96 166.4h-160c-19.2 0-32 12.8-38.4 32-6.4 44.8-32 89.6-64 115.2-32 25.6-76.8 44.8-128 44.8-44.8 0-89.6-19.2-128-44.8-32-32-57.6-70.4-64-115.2 0-19.2-19.2-32-38.4-32H121.6l96-166.4c12.8-19.2 6.4-38.4-12.8-51.2-19.2-12.8-38.4-6.4-51.2 12.8L32 531.2c-6.4 6.4-6.4 19.2-6.4 25.6V902.4c0 19.2 19.2 38.4 38.4 38.4h896c19.2 0 38.4-19.2 38.4-38.4V556.8z m-76.8 307.2H102.4V595.2H256c12.8 51.2 44.8 96 83.2 128C384 768 448 793.6 512 793.6c64 0 128-25.6 172.8-64 38.4-32 70.4-76.8 83.2-128h153.6v262.4zM300.8 371.2h108.8v230.4c0 12.8 12.8 19.2 19.2 19.2h153.6c12.8 0 25.6-12.8 25.6-19.2V371.2h108.8c12.8 0 25.6-12.8 25.6-25.6 0-6.4 0-12.8-6.4-12.8L524.8 128c-6.4-12.8-19.2-12.8-32 0L288 332.8c-6.4 6.4-6.4 25.6 0 32 0 6.4 6.4 6.4 12.8 6.4zM512 172.8l160 153.6H588.8c-12.8 0-19.2 12.8-19.2 25.6V576H454.4V352c0-12.8-12.8-19.2-25.6-19.2H358.4L512 172.8z" fill="#1296db" p-id="2708"></path></svg>
        <span style="position: absolute;left: 50%;bottom: 0px;transform: translateX(-50%);color: rgb(11, 139, 236);font-size: 12px;">点击/拖拽上传图片</span>
        <span style="position: absolute; right: 0px;top: 0px;font-size: 14px;color: red;">
            <span>数量:</span><span id="myInputNums">0</span> 
        </span>
        <input id="myInput" type="file" accept="image/png"  multiple />
    </div>

    <div class="me-input margn-top-20">
        <div>
            <span>打图模式</span>
            <span style="width: 20px;"></span>
            <select name="marge_model" id="marge_model_select" >
                <option value="0">横竖(适用简易动画)</option>
                <option value="1">竖横</option>
                <option value="2">横</option>
            </select>
        </div>
        <span style="width:20px"></span>
        <div class="me-input" id="vh_col_input">
            <span>一行几个：</span>
            <input id="customcol" type="text" placeholder="不填就是全自动">
        </div>
    </div>
    <div>
        <button id="margeBtn" class="my-button margn-top-20">开始打图</button>
    </div>
    <div id="imageContiner">

    </div>
    <table class="tip">
        <th>Tips</th>
        <tr>
            <td>【功能】</td>
            <td>合并图集</td>
        </tr>
        <tr class="v_model">
            <td>【竖版换行说明】</td>
            <td>
                <ul>
                    <li>1、图片命名方式：xxxxx结尾,一共三位升序的数字。</li>
                    <li>例：test_001.png,test_002.png,test_100.png</li>
                    <li>2、图片总个数尽量能排布为n*n，如25个，5*5。</li>
                    <li>3、图片尺寸合并后，超过2048*2048，会自动增加一张合并。</li>
                    <li>2、支持jpg,png格式的图片，图片容量总计最大不能超过5MB</li>
                </ul>
            </td>
        </tr>
        <tr class="h_model">
            <td>【横板说明】</td>
            <td>
                <ul>
                    <li>1、图片命名方式：xxxxx结尾,一共三位升序的数字。</li>
                    <li>例：test_001.png,test_002.png,test_100.png</li>
                    <li>2、支持jpg,png格式的图片，图片容量总计最大不能超过5MB</li>
                </ul>
            </td>
        </tr>
        <tr class="vh_model">
            <td>【横竖板说明】</td>
            <td>
                <ul>
                    <li>1、图片命名方式：xxxxx结尾,一共三位升序的数字。</li>
                    <li>例：test_001.png,test_002.png,test_100.png</li>
                    <li>2、支持jpg,png格式的图片，图片容量总计最大不能超过5MB</li>
                    <li>3、生成的图集名称按新规则来：文件名&&总数%列数,5,0.png</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>【操作】</td>
            <td>点击「选择文件」按钮，选择需要打包的图片后，点击「进行图集合并」按钮</td>
        </tr>
    </table>
</body>
</html>